<template>
  <div class="advanced-query-container">
    <header>高级查询</header>
    <!-- 基本信息 -->
    <div class="basic-info">
    <div class="info-title">基本信息</div>
    <div class="info-search">
      <ui-form :model="basicInfoForm" :rules="basicInfoForm" ref="basicInfoForm" label-width="100px" class="demo-ruleForm">
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="customerNo" label="客户号" class="address">
              <ui-input v-model="basicInfoForm.customerNo" placeholder="请输入客户号"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="客户名称">
              <ui-input v-model="basicInfoForm.input" placeholder="请输入客户名称"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="组织机构代码" class="emprise">
              <ui-input v-model="basicInfoForm.input" placeholder="请输入组织机构代码"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="region" label="所属行业" >
              <ui-select v-model="basicInfoForm.region" placeholder="请选择所属行业">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="证件号码">
              <ui-input v-model="basicInfoForm.input" placeholder="请输入证件号码"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="工商营业执照号" class="emprise emprise-no" label-width="120px">
              <ui-input v-model="basicInfoForm.input" placeholder="请输入工商营业执照号"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="region" label="证件类型">
              <ui-select v-model="basicInfoForm.region" placeholder="请选择证件类型">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item label="注册资本金额">
              <ui-col :span="11">
                <ui-input v-model="basicInfoForm.input" placeholder="请输入"></ui-input>
              </ui-col>
              <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
              <ui-col :span="10">
                <ui-input v-model="basicInfoForm.input" placeholder="请输入"></ui-input>
              </ui-col>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="企业成立日期" class="emprise">
              <ui-date-picker type="date" placeholder="请选择企业成立日期" v-model="basicInfoForm.date1" style="width: 100%;" :clearable="false"></ui-date-picker>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="region" label="注册地址">
              <ui-input v-model="basicInfoForm.input" placeholder="请输入注册地址" class="address"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="注册登记日期">
              <ui-date-picker type="date" placeholder="请选择注册登记日期" v-model="basicInfoForm.date1" style="width: 100%;" :clearable="false"></ui-date-picker>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="企业规模">
              <ui-select v-model="basicInfoForm.region" placeholder="请选择企业规模">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="region" label="是否授信客户">
              <ui-select v-model="basicInfoForm.region" placeholder="请选择是否授信客户">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
        </ui-row>
      </ui-form>
    </div>
    </div>
    <!-- 客户价值 -->
    <div class="customer-value">
      <div class="value-title">
        客户价值
      </div>
      <div class="value-search">
        <ui-form :model="customerValue" :rules="customerValue" ref="customerValue" label-width="100px" class="demo-ruleForm">
          <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
            <ui-col :span="7">
              <ui-form-item prop="customerNo" label="客户等级">
                <ui-select v-model="customerValue.region" placeholder="请选择客户等级">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
            <ui-col :span="7">
              <ui-form-item prop="input" label="是否集团客户">
                <ui-select v-model="customerValue.region" placeholder="请选择是否集团客户">
                  <ui-option label="区域一" value="shanghai"></ui-option>
                  <ui-option label="区域二" value="beijing"></ui-option>
                </ui-select>
              </ui-form-item>
            </ui-col>
            <ui-col :span="10">
              <ui-form-item label="资产余额">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
          </ui-row>
          <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
            <ui-col :span="7">
              <ui-form-item label="资产月日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="7">
              <ui-form-item label="资产季日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="10">
              <ui-form-item label="资产年日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
          </ui-row>
          <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
            <ui-col :span="7">
              <ui-form-item label="贷款余额">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="7">
              <ui-form-item label="贷款月日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="10">
              <ui-form-item label="贷款季日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
          </ui-row>
          <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
            <ui-col :span="7">
              <ui-form-item label="贷款年日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="7">
              <ui-form-item label="存款余额">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="10">
              <ui-form-item label="存款月日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
          </ui-row>
          <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
            <ui-col :span="7">
              <ui-form-item label="存款季日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="7">
              <ui-form-item label="存款年日均">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
            <ui-col :span="10">
              <ui-form-item label="授信额度">
                <ui-col :span="11">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
                <ui-col class="line" :span="2" style="text-align: center;">-</ui-col>
                <ui-col :span="10">
                  <ui-input v-model="customerValue.input" placeholder="请输入"></ui-input>
                </ui-col>
              </ui-form-item>
            </ui-col>
          </ui-row>
        </ui-form>
      </div>
  </div>
    <!-- 产品信息 -->
  <div class="production-info">
    <div class="production-title">
      产品信息
    </div>
    <div class="production-search">
      <ui-form :model="productionInfoForm" :rules="basicInfoForm" ref="basicInfoForm" label-width="100px" class="demo-ruleForm">
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="customerNo" label="持有产品">
              <ui-select v-model="productionInfoForm.region" placeholder="请选择持有产品">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="最早开户日期">
              <ui-date-picker type="date" placeholder="请选择最早开户日期" v-model="basicInfoForm.date1" style="width: 100%;" :clearable="false"></ui-date-picker>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="贷款到期日期"  class="comment-manage">
              <ui-date-picker type="date" placeholder="请选择贷款到期日期" v-model="basicInfoForm.date1" style="width: 100%;" :clearable="false"></ui-date-picker>
            </ui-form-item>
          </ui-col>
        </ui-row>
      </ui-form>
    </div>
  </div>
    <!-- 管户信息 -->
  <div class="account-info">
    <div class="account-title">
      管户信息
    </div>
    <div class="account-search">
      <ui-form :model="accountInfoForm" :rules="basicInfoForm" ref="basicInfoForm" label-width="100px" class="demo-ruleForm">
        <ui-row type="flex" class="row-bg" justify="space-between" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="customerNo" label="是否有管户人">
              <ui-select v-model="accountInfoForm.region" placeholder="请选择是否有管户人">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="管户人">
              <ui-input v-model="accountInfoForm.customerNo" placeholder="请输入管户人"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="10">
            <ui-form-item prop="date2" label="共管人" class="comment-manage">
              <ui-input v-model="accountInfoForm.customerNo" placeholder="请输入共管人"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" :gutter="20">
          <ui-col :span="7">
            <ui-form-item prop="customerNo" label="托管人" class="address">
              <ui-input v-model="accountInfoForm.customerNo" placeholder="请输入托管人"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="7">
            <ui-form-item prop="input" label="所属机构" class="institution">
              <ui-select v-model="accountInfoForm.region" placeholder="请选择所属机构">
                <ui-option label="区域一" value="shanghai"></ui-option>
                <ui-option label="区域二" value="beijing"></ui-option>
              </ui-select>
            </ui-form-item>
          </ui-col>
        </ui-row>
      </ui-form>
    </div>
  </div>
    <!-- 查询按钮 -->
    <ui-row type="flex" class="row-bg" justify="center">
      <ui-col :span="6">
        <ui-button size="small" @click="search">查询</ui-button>
      </ui-col>
      <ui-col :span="6">
        <ui-button size="small">重置</ui-button>
      </ui-col>
    </ui-row>
  </div>
</template>

<script>
export default {
  name:'advancedQuery',
  components:{
  },
  data(){
    return{
      basicInfoForm:{},
      customerValue:{},
      productionInfoForm:{},
      accountInfoForm:{}
    }
  },
  methods:{
    search(){
      this.$router.push({name:'accountQuery'})
    }
  }
}
</script>

<style lang="scss" scoped>
.advanced-query-container{
  header{
    margin-bottom: 10px;
    color: #333;
    font-weight: 600;
    font-size: 20px;
  }
  .basic-info,.customer-value,.production-info,.account-info{
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
    .account-title,.production-title,.value-title,.info-title{
      margin-bottom: 10px;
      font-size: 18px;
      color: #333;
      font-weight: 600;
    }
    .account-search,.production-search,.value-search,.info-search{
      padding: 0 10px;
      
    }
  }
  .ui-row--flex.is-justify-center{
    width: 25%;
    margin: 0 auto;
  }
}
::v-deep .address{
    .ui-input__inner{
      width: 97%;
    }
  }
  ::v-deep .emprise{
    .ui-input__inner{
      width: 57%;
    }
  }
  ::v-deep .emprise-no{
    .ui-input__inner{
      width: 60%;
    }
  }
  ::v-deep .emprise-no .ui-form-item__label{
    text-align: left;
  }
  ::v-deep .emprise-no .ui-input--small{
    margin-left: -19px;
  }
  ::v-deep .comment-manage{
    .ui-input__inner{
      width: 57%;
    }
  }
  ::v-deep .ui-date-editor--date .ui-input__prefix{
    display: none;
  }
  ::v-deep .institution{
    .ui-select{
      width: 100%;
    }
  }
</style>
